<template>
    <div class="courses-nav" id="courses-nav">
        <!-- 我的课程详情教师端导航 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo"  mode="horizontal" :router="true" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
            <el-menu-item index="/Teaching/MyCourses/CourseDetail">详情</el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/marking" :disabled="!markingDisabled">
                <el-tooltip v-if="!markingDisabled" class="item" effect="dark" :content="markingText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>批阅
            </el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Interflow/Answer/AnswerList" :disabled="!AnswerListDisabled">
                <el-tooltip v-if="!AnswerListDisabled" class="item" effect="dark" :content="AnswerListText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>交流
            </el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Examination/TestPaper/ExaminationList" :disabled="!ExaminationListDisabled">
                <el-tooltip v-if="!ExaminationListDisabled" class="item" effect="dark" :content="ExaminationListText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>考试
            </el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Statistics/Teach/TeachStatistics" :disabled="!AttenceStatisticsDisabled">
                <el-tooltip v-if="!AttenceStatisticsDisabled" class="item" effect="dark" :content="AttenceStatisticsText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>统计
            </el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Management/ManageClass/ManageList" :disabled="!ManageListDisabled">
                <el-tooltip v-if="!ManageListDisabled" class="item" effect="dark" :content="ManageListText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>管理
            </el-menu-item>
        </el-menu>
        <!-- 我的课程详情学生会端导航 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo"  mode="horizontal" :router="true" v-if="roles == 'STUDENT'">
            <el-menu-item index="/Teaching/MyCourses/CourseDetail">详情</el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Score" :disabled="!GradeDisabled">
                <el-tooltip v-if="!GradeDisabled" class="item" effect="dark" :content="GradeText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>成绩
            </el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Swap/Answer/SAnswerList" :disabled="!InterflowDisabled">
                <el-tooltip v-if="!InterflowDisabled" class="item" effect="dark" :content="InterflowText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>交流
            </el-menu-item>
            <el-menu-item index="/Teaching/MyCourses/Examination/StudentExamList" :disabled="!ExaminationListDisabled" >
                <el-tooltip v-if="!ExaminationListDisabled" class="item" effect="dark" :content="ExaminationListText" placement="bottom">
                    <i class="iconfont icon-biyan"></i>
                </el-tooltip>考试
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        props: ['websockMsg'],
        data () {
            return {
                activeIndex: '',
                // 课程ID
                coursesId: '',
                // 教师端导航是否禁止
                NavDisabled: false,
                // 学生端导航是否禁止
                stNavDisabled: false,
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',
                // 批阅disabled
                markingDisabled: '',
                markingText: '',
                // 交流disabled
                AnswerListDisabled: '',
                AnswerListText: '',
                // 考试disabled
                ExaminationListDisabled: '',
                ExaminationListText: '',
                // 统计disabled
                AttenceStatisticsDisabled: '',
                AttenceStatisticsText: '',
                // 管理disabled
                ManageListDisabled: '',
                ManageListText: '',
                // 成绩disabled
                GradeDisabled: '',
                GradeText: '',
                // 交流
                InterflowDisabled: '',
                InterflowText: '',
                //控制交流
                limts:''
            }
        },
        created () {
            let self = this
            //通信
            // self.InitWebSocket()
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
            // 导航初始化
            self.NavInit()

            self.fetchDate()

        },
        destroyed: function() {
            //页面销毁时关闭长连接
            // this.over()
        },
        methods: {
             //通知webSocket
            InitWebSocket() {
                let self = this;
                let hostname = window.location.host;
                const wsuri = "ws://" + hostname + "/tes/ws/global";
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close();
                };
            },
              websocketonopen(){
                console.log('open sucess')
            },
             websocketonmessage(e) {
                //数据接收
                let self = this
                const redata = JSON.parse(e.data)
                if (redata.type == 20) {
                    //开启问题交流
                    //self.limts = true
                } else if (redata.type == 21) {
                    //关闭问题交流
                    //self.limts = false
                }
            },
            fetchDate() {
                let self = this
                let cur_path
                if (self.$route.matched.length > 4) {
                    cur_path = self.$route.matched[3].meta.navActive; //获取当前路由
                }else{
                    cur_path = self.$route.meta.navActive;
                }
                self.activeIndex = cur_path
            },
            // 导航初始化
            NavInit() {
                let self = this
                self.$http.get('/tes/course/'+self.coursesId+'/navigation').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            // 批阅
                            self.markingDisabled = res.data[1].showed
                            self.markingText = res.data[1].hideDescription
                            // 交流
                            self.AnswerListDisabled = res.data[2].showed
                            self.AnswerListText = res.data[2].hideDescription
                            // 考试
                            self.ExaminationListDisabled = res.data[3].showed
                            self.ExaminationListText = res.data[3].hideDescription
                            // 统计
                            self.AttenceStatisticsDisabled = res.data[4].showed
                            self.AttenceStatisticsText = res.data[4].hideDescription
                            // 管理
                            self.ManageListDisabled = res.data[5].showed
                            self.ManageListText = res.data[5].hideDescription
                        }else if(self.roles == 'STUDENT'){
                            // 成绩
                            self.GradeDisabled = res.data[1].showed
                            self.GradeText = res.data[1].hideDescription
                            // 成绩
                            self.InterflowDisabled = res.data[2].showed
                            self.InterflowText = res.data[2].hideDescription
                            // 考试
                            self.ExaminationListDisabled = res.data[3].showed
                            self.ExaminationListText = res.data[3].hideDescription
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        watch: {
            "$route": "fetchDate",
            'websockMsg': {
                handler: function(newval , oldval) {
                    let self = this
                    if (newval.type == 20) {
                        //开启问题交流
                        self.InterflowDisabled = false
                        self.InterflowText = '教师未开启交流模块'
                        self.$localstorage.putLocalStorage('limts', true) //设置值
                    } else if (newval.type == 21) {
                        //关闭问题交流
                        self.InterflowDisabled = true
                        self.InterflowText = '教师未开启交流模块'
                        self.$localstorage.putLocalStorage('limts', false) //设置值
                    }
                },
                deep: true
            }
		}
    }
</script>
<style lang="scss" scoped>
    #courses-nav{
        .el-menu-demo{
            .el-menu-item{
                i{
                    vertical-align: sub;
                    margin-right: 10px;
                }
                &:hover{
                     color:#1277eb
                }
            }
            .is-disabled{
                &:hover{
                     color:#474747
                }
            }
        }
    }
</style>

